<template>
  <div>
    <div class="navbar">
      <van-nav-bar
        fixed
        placeholder
        safe-area-inset-top
        title="获取积分"
        @click-left="back"
      >
        <template #left>
          <van-icon name="arrow-left" size="16px" color="#333" />
        </template>
      </van-nav-bar>
    </div>
    <div class="headercard">
      <div>
        <span>{{ integral }}</span>
        <span>可用积分</span>
        <van-icon name="arrow" size="12px" class="icon" />
      </div>
      <button @click="toIntegralRecord">积分记录</button>
    </div>
    <div class="card1">
      <img src="../../assets/card1.png" alt="" width="345px" height="112px" />
      <button @click="buyIntegral">去充值</button>
    </div>
    <div class="card2">
      <img src="../../assets/card2.png" alt="" width="345px" height="112px" />
      <button @click="goTui">去邀请</button>
    </div>
    <button class="bgBtn" @click="buyIntegral">充值积分</button>
  </div>
</template>

<script>
import { Toast } from "vant";
// import { getUserInfo } from "@/apis/user.js";
// import local from "@/utils/local.js";
import { mapGetters } from "vuex";
import { _local } from "@/utils/storage";
import { shareIntegral } from "@/apis/integral";

export default {
  data() {
    return {};
  },
  computed: {
    ...mapGetters(["integral"]),
  },
  created () {
    //h5+功能接口需要调用此函数
    const _this=this
    this.$plusReady(() => {
        plus.share.getServices(function (e) {
          _this.shareData = e;
          for (var i in e) {
            if (e[i].id == "weixin") {
              _this.sharewx = e[i];
            }
          }
        });
      });
  },
  methods: {
    goTui() {
      const _this = this;
      if (_local.get("role") == 1 || _local.get("role") == 5) {
        var msg = {
          type: "web",
          title: "Hi,这里有0中介费的直租好房！",
          content: `租房神器！房东直租没有中介费，价格比长租公寓便宜`,
          thumbs: ["https://image.nunbdc.net/image/152-152.png"],
          href: "https://html.nunbdc.net/share2.html",
          extra: { scene: "WXSceneSession" },
        };
      }
      if (_local.get("role") == 2 || _local.get("role") == 3) {
        var msg = {
          type: "web",
          title: "Hi,这里可以直买直租0中介费！",
          content: `租客多、买家多、快速交易、快速变现！省时省心更赚钱`,
          thumbs: ["https://image.nunbdc.net/image/152-152.png"],
          href: "https://html.nunbdc.net/fangyeShare2.html",
          extra: { scene: "WXSceneSession" },
        };
      }
      if (_local.get("role") == 4) {
        var msg = {
          type: "web",
          title: "兄弟，我在这里可以抢单抢红包！",
          content: `经纪人赚钱神器！全平台自由协作不分佣不扣佣，赚钱多结算快！`,
          thumbs: ["https://image.nunbdc.net/image/152-152.png"],
          href: "https://html.nunbdc.net/agent6.html",
          extra: { scene: "WXSceneSession" },
        };
      }
      _this.sharewx.send(
        msg,
        function () {
          if (_local.get("role") == 1) {
            _this.shareGetIntegral();
          }
          _this.$toast.success("分享成功");
        },
        function () {
          _this.$toast("分享失败");
        }
      );
    },
    shareGetIntegral() {
      const _this = this;
      shareIntegral({ type: 5 }).then((res) => {
        if (res.code === 200) {
          _this.$toast("分享成功，获得1积分");
        }
      });
    },
    back() {
      this.$router.go(-1);
    },
    toIntegralRecord() {
      this.$router.push("/IntegralRecord");
    },
    buyIntegral() {
      this.$router.push("/RechargeIntegral");
    },
  },
};
</script>

<style lang="less" scoped>
.headercard {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  height: 80px;
  background-image: linear-gradient(90deg, #6a6b84, #5b5e75, #394052);
  & > div:first-child {
    margin-left: 15px;
    .icon {
      color: white;
      transform: translateY(2px);
      margin-left: 2px;
    }
    span:nth-child(1) {
      color: white;
      font-weight: bold;
      font-size: 24px;
      margin-right: 8px;
    }
    span:nth-child(2) {
      color: white;
      font-size: 12px;
    }
  }
  & > button:active {
    background-color: #2d313f7a;
  }
  & > button {
    margin-right: 15px;
    background-color: #2d313f;
    color: white;
    border-radius: 12px;
    font-size: 12px;
    width: 80px;
    height: 24px;
    border: 0;
  }
}
.card1 {
  width: 345px;
  height: 112px;
  margin: 15px auto;
  position: relative;
  color: #ff9a32;
  button:active {
    background-color: #ddd;
  }
  button {
    width: 79px;
    height: 30px;
    position: absolute;
    top: 41px;
    right: 9.5px;
    border-radius: 14px;
    border: 0;
    font-size: 13px;
    background-color: #fff;
  }
}
.card2 {
  width: 345px;
  height: 112px;
  margin: 0 auto;
  position: relative;
  button:active {
    background-color: #ddd;
  }
  button {
    width: 79px;
    height: 30px;
    position: absolute;
    top: 41px;
    right: 9.5px;
    border-radius: 14px;
    border: 0;
    font-size: 13px;
    color: #04b7cb;
    background-color: #fff;
  }
}
.bgBtn:active {
  background-image: linear-gradient(#f3ad457e, #ff9c3381);
}
.bgBtn {
  width: 92%;
  height: 45px;
  background-image: linear-gradient(#f3ad45, #ff9b33);
  border: 0;
  border-radius: 22.5px;
  color: #fff;
  position: fixed;
  margin-left: 4%;
  bottom: 15px;
}
</style>